{include file="public/header" title="POS是一种多功能终端"/}
<header id="header" class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">POS是一种多功能终端</h1>
</header>
<style>
    body, .mui-content {
        background: #F0F2F5;
    }
</style>
<!--产品轮播图-->
<div class="mui-content" id="product_details">
    <div id="slider" class="mui-slider banner">
        <div class="mui-slider-group mui-slider-loop">
            {empty name="item['thumb']"}
            <div class="mui-slider-item">
                <a href="#">
                    <img src="/static/uploads/goods/{$item['goods_photo']}">
                </a>
            </div>
            {else/}
            {foreach name="item['thumb']" id="value"}
            <div class="mui-slider-item">
                <a href="#">
                    <img src="/static/uploads/test/{$value['path']}">
                </a>
            </div>
            {/foreach}
            {/empty}
        </div>
        <div class="mui-slider-indicator">
            {empty name="item['thumb']"}
            <div class="mui-indicator mui-active"></div>
            {else/}
            {foreach name="item['thumb']" id="value" key="i"}
            <div class="mui-indicator {eq name='$i' value='0'}mui-active{/eq}"></div>
            {/foreach}
            {/empty}
        </div>
    </div>
    <div class="info">
        <a>{$item['goods_name']}</a>
        <p>
            <span>￥</span>{:get_price($item['goods_price'])}.<span>{:get_price($item['goods_price'],1)}</span>
            <em>市场价:{$item['goods_market_price']}</em>
        </p>
    </div>
    <div id="details">
        <div class="attr"><span>颜色</span>随机</div>
        <div class="attr"><span>重量</span>{$item['goods_weight']/1000}kg</div>
        <div class="attr">
            <span>数量</span>
            <div class="mui-numbox" data-numbox-min='0'>
                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                <input class="mui-input-numbox number" type="number" value="1"/>
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
            </div>
        </div>
    </div>
    <div id="content">
        {$item['content']}
    </div>

    <div id="details_nav">
        <div>
            <a href="">
                <p><i class="sun sun-publishgoods_fill"></i></p>
                购物车
            </a>
        </div>
        <div>
            <a class="layui-btn red">立即购买</a>
            <a class="layui-btn orange">加入购物车</a>
        </div>
    </div>
</div>
<script>
    (function ($) {
        $.init({
            swipeBack: true //启用右滑关闭功能
        });

        /**
         * 监听商品数量点击
         */
        mui('.number').each(function (index, obj) {
            obj.addEventListener('change', function () {
                if (obj.value < 1) {
                    obj.value = 1;
                    mui.toast('该商品一件起售', {duration: 'short', type: 'div'});
                    return false;
                }
            });
        });

        $.previewImage();

    })(mui);
</script>
{include file="public/footer"/}